<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>

     .el-input__inner {
        background-color: rgba(255,255,255,0.5);
        }
     .el-form-item__label{
         color: white;
     }
    /*#background{*/
    /*    position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;z-index: -1;*/
    /*    background: url("imgs/ys.mp4") center center / cover no-repeat;*/
    /*}*/
    /*#background video{*/
    /*    position: absolute;*/
    /*    top: 0;left: 0;min-width:100%;min-height: 100%;*/
    /*}*/
      body{
         background: url("imgs/reg.jpg") no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
     }
    </style>
</head>
<body>
<div id="app" >
<!--    <div id="background">-->
<!--    <video poster="ys.mp4" loop autoplay muted>-->
<!--        <source src="imgs/ys.mp4" type="audio/mp4">-->
<!--    </video>-->
<!--    </div>-->
    <!--注册表单开始-->

    <el-card id="reg" style="width: 500px;background-color: transparent;position: relative;left: 500px;top: 50px" >
        <el-form class="demo-ruleForm" :model="user" status-icon :rules="rules" ref="ruleForm" label-width="80px" label-width="auto" show-message="true"
                 inline-message="true" >
            <el-form-item>
                <h1 style="float: left;font-size: 28px">立即注册</h1>
                <a style="float: right;
                                text-decoration: none;color: #409EFF;
                                position: relative;top: 20px"  href="login.html">
                    已有账号?现在登录
                </a>
            </el-form-item>
            <el-form-item label="用户名" prop="userName"
                          :rules="{required: true, message: '用户名不能为空', trigger: 'blur'}">
                <el-input placeholder="请输入用户名" v-model="user.userName" ></el-input>
            </el-form-item>
<!--            :rules="{required: true, message: '密码不能为空', trigger: 'blur'}"-->
            <el-form-item label="密码" prop="password" >
                <el-input type="password" v-model="user.password" autocomplete="off" ></el-input>
            </el-form-item>

<!--            :rules="{required: true, message: '密码不能为空', trigger: 'blur'}"-->
            <el-form-item label="确认密码" prop="checkPass" >
                <el-input type="password" v-model="user.checkPass" autocomplete="off" ></el-input>
            </el-form-item>
<!--            :rules="{required: true, message: '年龄不能为空', trigger: 'blur'}"-->
            <el-form-item label="年龄" prop="age" >
                <el-input v-model.number="user.age" ></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="user.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号码" prop="age" >
                <el-input v-model.number="user.phone" ></el-input>
            </el-form-item>
            <el-form-item
                    prop="email"
                    label="邮箱"
                    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
            >
                <el-input v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName" :rules="{required: true, message: '昵称不能为空', trigger: 'blur'}">
                <el-input placeholder="请输入昵称" v-model="user.nickName" ></el-input>
            </el-form-item>
            <el-form-item label="头像" >

                   <!--**********上传组件开始***********-->
                   <!--action设置请求地址
                   name设置上传文件的参数名称
                   limit设置上传文件的数量-->
                   <el-upload style="float: left"
                              action="/v1/uploads/"
                              name="file"
                              limit="1"
                              list-type="picture-card"
                              :on-success="handleSuccess"
                              :on-preview="handlePictureCardPreview"
                              :on-remove="handleRemove">
                       <i class="el-icon-plus"></i>
                   </el-upload>
                   <el-dialog :visible.sync="dialogVisible">
                       <img width="100%" :src="dialogImageUrl">
                   </el-dialog>
                   <!--**********上传组件结束***********-->

            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <!--注册表单结束-->
</div>








<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/my-header.js"></script>

<script>
    let v = new Vue({
        el: '#app',
        data() {
            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value < 18) {
                            callback(new Error('必须年满18岁'));
                        } else {
                            callback();
                        }
                    }
                }, 1000);
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.user.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                url:"",
                dynamicValidateForm: {
                    domains: [{
                        value: ''
                    }],
                    email: ''
                },
                ruleForm: {
                    password: '',
                    checkPass: '',
                    age: ''
                },
                user: {
                    userName:'',
                    password: '',
                    checkPass: '',
                    nickName:'',
                    age: '',
                    gender:"",
                    phone:"",
                    email:""
                },
                rules: {
                    nickname:[{ validator: validatePass, trigger: 'blur' }],
                    password: [{ validator: validatePass, trigger: 'blur' }],
                    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
                    age: [{ validator: checkAge, trigger: 'blur' }],
                    username:[{ validator: validatePass, trigger: 'blur' }]
                },
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let userTo={userName:v.user.userName,password:v.user.password,nickName:v.user.nickName,
                            age:v.user.age,gender:v.user.gender,phone:v.user.phone,email:v.user.email};
                        axios.post("/v1/users/reg",v.userTo).then(function (response) {
                            if(response.data.code==1){
                                alert("注册成功！")
                                location.href="/"
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleSuccess(response,file,fileList){//当上传成功时此方法会执行
                // response==file.response 代表服务器响应的ResultVo
                v.url = response.data;
            },
            handleRemove(file, fileList) {
                v.url="";
                console.log(file, fileList);
                //发出删除文件的请求   file.response上传成功时服务器响应的内容ResultVO
                console.log(file.response);
                axios.get("/v1/uploads/remove?url=" + file.response.data).then(function () {
                    console.log("服务器文件删除完成!");
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    })
</script>
</body>
</html>
